<template>
	<div class="app-container">
		<div class="table">
			<div class="table-top">
				<p>
					<span>产品名称：</span>
					<el-input v-model="form.nametitle" placeholder="产品名称"></el-input>
				</p>
				<p>
					<span>净含量：</span>
					<el-select v-model="form.suttle" placeholder="请选择净含量">
						<el-option
							v-for="item in jkglist"
							:key="item.id"
							:label="item.jingzhong"
							:value="item.jingzhong">
						</el-option>
					</el-select>
				</p>
			</div>
			<div class="table-center">
				<div class="table-center-l">
					<p>
						<span>执行标准：</span>
						<el-select v-model="form.standard" placeholder="请选择执行标准">
							<el-option
								v-for="item in biaozhunlist"
								:key="item.id"
								:label="item.standard"
								:value="item.standard">
							</el-option>
						</el-select>
					</p>
					<p>
						<span>生产日期：</span>
						<el-input v-model="form.dateproduced" disabled></el-input>
					</p>
					<p>
						<span>生产批号：</span>
						<el-input v-model="form.pihao" disabled></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="status == 1">
					<p>
						<span>等级：</span>
						<el-input v-model="form.grades" placeholder="等级"></el-input>
					</p>
					<p>
						<span>规格：</span>
						<el-input v-model="form.specifications" placeholder="规格"></el-input>
					</p>
					<p>
						<span>类别：</span>
						<el-input v-model="form.categorys" placeholder="类别"></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="status == 2">
					<p>
						<span>ERP编码：</span>
						<el-input v-model="form.erpcode" placeholder="ERP编码"></el-input>
					</p>
					<p>
						<span>SAP代码：</span>
						<el-input v-model="form.sapcode" placeholder="SAP代码"></el-input>
					</p>
					<p>
						<span>包装规格：</span>
						<el-input v-model="form.baozhuangGrades" placeholder="包装规格"></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="status == 3">
					<p>
						<span>物料代码：</span>
						<el-input v-model="form.materielcode" placeholder="物料代码"></el-input>
					</p>
					<p>
						<span>供应商：</span>
						<el-input v-model="form.suppliers" placeholder="供应商"></el-input>
					</p>
					<p>
						<span>包装规格：</span>
						<el-input v-model="form.baozhuangGrades" placeholder="包装规格"></el-input>
					</p>
				</div>
				<div class="table-center-c" v-if="status == 5">
					<p>
						<span>等级：</span>
						<el-input v-model="form.grades" placeholder="等级"></el-input>
					</p>
					<p>
						<span>包装规格：</span>
						<el-input v-model="form.baozhuangGrades" placeholder="包装规格"></el-input>
					</p>
				</div>
				<div class="table-center-r">
					<p>
						<span>生产许可证编号：</span>
						<el-input v-model="form.tab" placeholder="生产许可证编号"></el-input>
					</p>
					<p v-if="status == 6 || status == 7">
						<span>规 格：</span>
						<el-select v-model="form.specifications" placeholder="请选择规格">
              <el-option
                v-for="item in mkglist"
                :key="item.id"
                :label="item.maozhong"
                :value="item.maozhong"
              ></el-option>
            </el-select>
						<!-- <el-input v-model="form.specifications" placeholder="规格"></el-input> -->
					</p>
					<p v-else>
						<span>毛 重：</span>
						<el-select v-model="form.kg" placeholder="请选择毛重">
							<el-option
								v-for="item in mkglist"
								:key="item.id"
								:label="item.maozhong"
								:value="item.maozhong">
							</el-option>
						</el-select>
					</p>
					<p v-if="status != 9">
						<span>含 量：</span>
						<el-input v-model="form.hanliang" placeholder="含量"></el-input>
					</p>
				</div>
			</div>
			<!-- tale底部 -->
			<div class="table-btm">
				<div>
					<p>
						<span>商品名：</span>
						<el-input v-model="form.tradename" placeholder="商品名"></el-input>
					</p>
					<p>
						<span v-if="status == 6">批准文号：</span>
						<el-input v-model="form.piwen" placeholder="批准文号" v-if="status == 6"></el-input>
					</p>
					<p>
						<span>类型：</span>
						<el-input v-model="form.type" placeholder="类型"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>成分表：</span>
						<el-input v-model="form.chengfenvalues" placeholder="乳酸,水"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>保质期：</span>
						<el-input v-model="form.expirations" placeholder="保质期"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>使用量：</span>
						<el-select v-model="form.use" placeholder="请选择使用量">
							<el-option
								v-for="item in uselist"
								:key="item.id"
								:label="item.method"
								:value="item.method">
							</el-option>
						</el-select>
					</p>
				</div>
				<div>
					<p>
						<span>使用方法：</span>
						<el-input v-model="form.method" placeholder="使用方法"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>成分保证值：</span>
						<el-input v-model="form.ensurevalue" placeholder="请输入成分保证值"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>适用范围：</span>
						<el-input v-model="form.scope" placeholder="适用范围"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>贮藏方法：</span>
						<el-input type="textarea" v-model="form.condition" placeholder="贮藏方法"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>注意事项：</span>
						<el-input type="textarea" v-model="form.notice" placeholder="注意事项"></el-input>
					</p>
				</div>
				<div style="font-weight: 600">
					<p>
						<span>所属目录：</span>
						<el-select v-model="form.typeid" placeholder="请选择所属目录">
							<el-option
								v-for="item in mululist"
								:key="item.id"
								:label="item.catalogueName"
								:value="item.id">
							</el-option>
						</el-select>
					</p>
				</div>
				<div>
					<p>
						<span>备注：</span>
						<el-input type="textarea" v-model="form.beizhu" placeholder="备注"></el-input>
					</p>
				</div>
				<h6>
					<div style="display: flex; align-items: center;">
						<img src="@/assets/img/qingzhen.jpg" width="100" v-if="status == 7">
						<img src="@/assets/img/kosher.png" width="100" v-if="status == 8">
						<svg width="200px" height="70px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="margin: 0px;">
							<polygon points="50,31 120,59  190,31  120,1" style="fill:#FFFFFF;stroke:#000000;stroke-width:2;">
							</polygon>
							<text style="fill: black;font-size: 16px;" x="95" y="35">合&nbsp;&nbsp;&nbsp;&nbsp;格</text>
						</svg>
					</div>
					<!-- <img src="@/assets/img/logo.jpg" alt=""> -->
				</h6>
			</div>
			<div class="tips">
				<p>本企业通过 ISO9001、ISO14001、ISO45001、ISO22000 管理体系认证</p>
				<p><span>生产商：河南金丹乳酸科技股份有限公司</span><span>地址：河南省周口市郸城县金丹大道08号</span></p>
				<p><span>电话：0394-3195355 3195318</span><span>传真：0394-3195766</span><span>网址：http://www.hnjindan.com</span></p>
			</div>
			<div class="submit" @click="submit" :class="isClick ? 'disable' : ''">提交</div>
		</div>
	</div>
</template>

<script>
import { addEwmMuban,getJingzhong,getMaozhong,getUseMothod,ewmMulu,getEwmBiaozhun } from '@/api/ewmApi'
export default {
	data() {
		return {
			form: {
				beizhu: '',        //备注
				condition: '',     //贮藏方法
				dateproduced: '',  //生产日期
				expirations: '',   //保质期
				ensurevalue: '',   //成分保证值
				guige: '',         //规格
				hanliang: '',      //净含量
				kg: '',            //毛重
				materielcode: '',  //物料编码
				method: '',    		 //使用方法
				nametitle: '',     //产品名称
				notice: '',    		 //注意事项
				piwen: '',         //批准文号
				chengfenvalues: '',//成分表
				queren: 1,        //确认是否让用户可用
				scope: '',         //适用范围
				//sorttype: '',      //排序
				standard: '',      //执行标准
				//supplierid: '',    //备注
				suppliertype: '',  //成分表
				suttle: '',        //净重
				tab: '',           //生产许可证编号
				tradename: '',     //商品名
				type: '',          //类型
				typeid: 0,         //目录id
				use: '',           //使用量
				specifications: '',         //规格
				categorys: '',       //类别
				erpcode: '',           //erp代码
				sapcode: '',           //sap编码
				suppliers: '',      //供应商
				grades: '',         //等级
				baozhuangGrades: '',       //包装规格
				//username: ''       //备注
			},
			status: -1,    //特殊模板值
			uselist: [],   //使用量数组
			mululist: [],  //目录数组
			jkglist: [],   //净重数组
			mkglist: [],   //毛重数组
			biaozhunlist: [],   //执行标准
			isClick: false
		};
	},
	mounted(){
		this.ewminit()
		this.status = this.$route.params.status
	},
	methods: {
		ewminit(){
			this.getJkglist()
			this.getMkglist()
			this.getUselist()
			this.getMululist()
			this.getBiaozhunlist()
		},
		submit() {
			this.isClick = true
			this.form.status = this.status
			addEwmMuban(this.form).then(res => {
				console.log(res)
				this.$message({
					message: res.message,
					type: 'success'
				})
				this.$router.push({
					name: 'Moban'
				})
			})
		},
		getJkglist(){
			getJingzhong({}).then(res => {
				console.log(res)
				this.jkglist = res.data
			})
		},
		getMkglist(){
			getMaozhong({}).then(res => {
				console.log(res)
				this.mkglist = res.data
			})
		},
		getUselist(){
			getUseMothod({}).then(res => {
				console.log(res)
				this.uselist = res.data
			})
		},
		getMululist(){
			ewmMulu({}).then(res => {
				console.log(res)
				this.mululist = res.data
			})
		},
		getBiaozhunlist(){
			getEwmBiaozhun({}).then(res => {
				console.log(res)
				this.biaozhunlist = res.data
			})
		}
	}
};
</script>

<style lang="scss" scoped>
p {
	padding: 0;
	margin: 5px 0;
}
.app-container {
	background: #fff;
}
.table {
	width: 1100px;
	&-top {
		border-top: 3px solid #000000;
		display: flex;
		align-items: center;
		> p {
			// font-family: '宋体';
			flex: 1;
			display: flex;
			font-size: 29px;
			align-items: center;
			/deep/.el-input {
				width: 200px;
			}
			/deep/.el-input--medium .el-input__inner {
				width: 200px !important;
			}
		}
	}
	&-center {
		border-top: 3px solid #000000;
		display: flex;
		flex-wrap: wrap;
		&-l{
			flex: 1;
		}
		&-c{
			flex: 1;
		}
		&-r{
			flex: 1.5;
		}
		>div{
			> p {
				font-family: '宋体';
				width: 100%;
				display: flex;
				font-size: 20px;
				// font-weight: bold;
				align-items: center;
				/deep/.el-input {
					width: 150px;
					height: 32px;
				}
				/deep/.el-input--medium .el-input__inner {
					width: 150px !important;
					height: 32px;
				}
			}
		}
	}
	&-btm {
		position: relative;
		border-top: 3px solid #000000;
		> div {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			> p {
				font-family: '宋体';
				width: 33%;
				display: flex;
				font-size: 20px;
				align-items: center;
				/deep/.el-input {
					width: 200px;
					height: 32px;
				}
				/deep/.el-input--medium .el-input__inner {
					width: 200px !important;
					height: 32px;
				}
				/deep/.el-textarea {
					width: 200px !important;
					// height: 32px;
				}
				&:nth-child(3) {
					justify-content: flex-end;
				}
			}
		}
		> h6 {
			position: absolute;
			right: 0;
			top: 50px;
			display: flex;
			flex-direction: column;
			align-items: center;
			>img{
				width: 100px;
				height: 100px;
				position: absolute;
				right: 30px;
    		top: 100px;
			}
		}
	}
}
.tips{
		width: 100%;
		>p{
			display: flex;
			justify-content: space-between;
			font-size: 20px;
			font-weight: 700;
			line-height: 30px;
		}
	}
	.submit{
		width: 100px;
		height: 40px;
		background: #18a05e;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
	}
</style>
